<template>
  <div id="editUserLayout">
    <bread-crumb module-name="用户及权限" module-link="/sys" feature-name="用户" feature-link="/sys/users" activity-name="用户修改" />
    <Row class="form-panel">
      <i-col  :xs="{ span: 6}"  :lg="{ span: 10}">
      <Form ref="userInfo" :model="userInfo" :rules="ruleValidate" label-width="100">
        <Form-item label="用户名：" prop="username">
          <Input v-model="userInfo.username" placeholder="请输入用户名"/>
        </Form-item>
        <Form-item label="手机号：" prop="mobile">
          <Input v-model="userInfo.mobile" placeholder="请输入手机号"/>
        </Form-item>
        <Form-item label="电子邮箱：" prop="email">
          <Input v-model="userInfo.email" placeholder="请输入电子邮箱"/>
        </Form-item>
        <Form-item label="状态：" prop="status">
          <Radio-group v-model="userInfo.status">
            <Radio label="1">激活</Radio>
            <Radio label="0">停用</Radio>
          </Radio-group>
        </Form-item>
        <Form-item>
          <Button type="primary" @click="handleSubmitUser('userInfo')">提交</Button>
        </Form-item>
      </Form>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import BreadCrumb from '../Breadcrumb.vue'
  import ICol from '../../../node_modules/iview/src/components/grid/col'
  export default {
    components: {
      ICol,
      BreadCrumb},
    data () {
      return {
        userInfo: {
          username: '',
          email: '',
          mobile: '',
          status: 1
        },
        ruleValidate: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '电子邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择是否激活', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      this.$http.get('/sys/user/info/' + this.$route.params.userId).then((response) => {
        console.log(response.data)
        console.log(response.data.code)
        this.$data.userInfo = response.data.user
      })
    },
    methods: {
      handleSubmitUser (formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$http.post('/sys/user/update', this.$data.userInfo).then((response) => {
              console.log(response.data)
              console.log(response.data.code)
              if (response.data.code !== 200) {
                this.$Message.error('提交失败！')
              }
            })
          }
        })
      }
    }
  }
</script>
<style>
  #editUserLayout .form-panel {
    background-color:#fff;
    padding: 50px;
    border: 1px solid #dddee1;
  }
</style>
